import { useState, useMemo } from 'react';
import './App.css';

function App() {
  console.log('render app');

  const [count, setCount] = useState(1);
  const [count1, setCount1] = useState(1);

  /**
   * useMemo 是 React 提供的一个 Hook，用于优化性能。
      它的主要作用是记忆化计算结果，避免在每次渲染时都重新计算昂贵的操作。
      useMemo 会缓存计算结果，并在依赖项发生变化时重新计算。
      如果依赖项没有变化，useMemo 会直接返回之前缓存的结果，而不是重新执行计算函数。
      useMemo 接受两个参数：
      第一个参数是一个计算函数，返回需要记忆化的值。
      第二个参数是一个依赖数组，当依赖数组中的值发生变化时，useMemo 会重新计算并返回新的值。
   */
  console.time("time")
  let total = useMemo(() => {
    let total = 0;
    for (let i = 0; i < 1000000000; i++) {
      total += i;
    }
    return total;
  }, [count]);
  console.timeEnd("time")
  return (
    <>
      <div className='card'>
        <span>total: {total}</span>
        <br />
        <span style={{ marginRight: 20 }}>count is {count}</span>
        <br />
        <button onClick={() => setCount(count => count + 1)}>修改Count</button>
        <br />
        <br />
        <br />
        <span style={{ marginRight: 20 }}>count1 is {count1}</span>
        <br />
        <button onClick={() => setCount1(count => count + 1)}>修改Count1</button>
      </div>
    </>
  );
}

export default App;
